import RandomIcon from '@/components/RandomIcon'
// import AccreditIcon from '@/components/accreditDia/AccreditIcon'
import { AccordionContent, AccordionItem, AccordionTrigger } from '@/components/bs-ui/accordion'
import { Badge } from '@/components/bs-ui/badge'
import { Button } from '@/components/bs-ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/bs-ui/tooltip'

import { useDictStore } from '@/store/dictStore'
import { Tooltip as AntTooltip, Divider } from 'antd'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import '../css/tooIltem.less'

export default function ToolItem({
  type,
  select,
  data,
  onEdit = (e, id) => {},
  onRecords = (e, id) => {},
  onSelect,
  onAccreditDia = () => {}
}) {
  const { t } = useTranslation()
  const { loadDictOptions } = useDictStore()
  const [typeList, setTypeList] = useState([])

  const loadTypeList = (type = 'category') => {
    loadDictOptions(type).then(res => {
      if (res) {
        setTypeList(res)
      }
    })
  }
  useEffect(() => {
    loadTypeList()
  }, [])
  return (
    <AccordionItem
      key={data.id}
      value={data.id}
      className="data-[state=open]:rounded-md data-[state=open]:border-2 data-[state=open]:border-primary/20"
    >
      {/* @ts-expect-error ignore this because no use */}
      <AccordionTrigger className=" itemsCss_toollItem" type={'toollItem'}>
        <div className="cardLeft_case group relative flex w-full gap-2 pr-4 text-start">
          {data.logo ? (
            <img src={data.logo} className="h-8 w-8 min-w-8 rounded-sm" alt="" />
          ) : (
            <RandomIcon></RandomIcon>
          )}
          <div className="cardLeft_case min-w-0 flex-1">
            <div className="plugin-family flex w-full  items-center justify-between gap-2 text-sm font-medium font-semibold leading-none">
              <span className="cardLeft domOverflowEllip">{data.name}</span>
              {type === 'edit' && (
                /* 修改 版本记录 | 基础信息 */
                <>
                  <div className="flexRowStart caseHidNext">
                    <AntTooltip title="编辑">
                      <div
                        className="cursor-pointer rounded opacity-0 hover:bg-[#EAEDF3] group-hover:opacity-100"
                        onClick={e => onEdit(e, data.id)}
                      >
                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M8 20V17L17 8L20 11L11 20H8Z"
                            stroke="#7587A5"
                            strokeWidth="1.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M17 14L14 11"
                            stroke="#7587A5"
                            strokeWidth="1.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M15 20L20 20"
                            stroke="#7587A5"
                            strokeWidth="1.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                    </AntTooltip>
                    <AntTooltip title="版本记录">
                      <div
                        className="cursor-pointer rounded opacity-0 hover:bg-[#EAEDF3] group-hover:opacity-100"
                        onClick={e => onRecords(e, data.id)}
                        style={{ marginLeft: '8px' }}
                      >
                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M8.5 9C8.5 8.44772 8.94772 8 9.5 8H16.0858C16.351 8 16.6054 8.10536 16.7929 8.29289L19.2071 10.7071C19.3946 10.8946 19.5 11.149 19.5 11.4142V19C19.5 19.5523 19.0523 20 18.5 20H9.5C8.94771 20 8.5 19.5523 8.5 19V9Z"
                            stroke="#7587A5"
                            strokeWidth="1.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M12 12.5L14 15.5L16 12.5"
                            stroke="#7587A5"
                            strokeWidth="1.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                    </AntTooltip>
                    {/* <AntTooltip title="授权">
                      <div
                        className="cursor-pointer rounded opacity-0 hover:bg-[#EAEDF3] group-hover:opacity-100"
                        onClick={e => {
                          e.stopPropagation()
                          onAccreditDia()
                        }}
                        style={{ marginLeft: '8px' }}
                      >
                        <AccreditIcon />
                      </div>
                    </AntTooltip> */}
                  </div>
                  {/* 基础信息 */}
                  <div className="flexRowStart caseHid">
                    {typeList.length > 0 && data.category_code && (
                      <>
                        <span className="info_nohid">
                          {typeList.find(item => item.value === data.category_code)?.label}
                        </span>
                        <Divider style={{ margin: '0 16px' }} type="vertical" />
                      </>
                    )}
                    <span className="info_nohid">
                      {t('tools.CreatedOn')}
                      {data.create_time.replace('T', ' ')}
                    </span>
                    {data?.children?.length > 0 && (
                      <>
                        <Divider style={{ margin: '0 16px' }} type="vertical" />
                        <span className="info_nohid">
                          {/* {digitToChinese(data.children.length)} */}
                          {data.children.length}
                          {t('tools.tools')}
                        </span>
                      </>
                    )}
                  </div>
                </>
              )}
            </div>
            <p
              className="cardLeft_desc mt-2 break-all text-sm text-muted-foreground"
              style={{ fontSize: '14px', fontWeight: 400 }}
            >
              {data.description}
            </p>
          </div>
        </div>
      </AccordionTrigger>
      <AccordionContent className="">
        <div className="mb-4 px-6" style={{ marginLeft: '32px' }}>
          {data.children.map(api => (
            <div key={api.id} className="relative rounded-sm border-t  p-4">
              <h1 className="text-sm font-medium leading-none">{api.name}</h1>
              <div className="mt-2 break-all text-sm text-muted-foreground">{api.desc}</div>
              {api.api_params?.length > 0 && (
                <div className="mt-2 flex gap-2 text-sm text-muted-foreground">
                  <TooltipProvider>
                    <Tooltip delayDuration={100}>
                      <TooltipTrigger asChild>
                        <span className="cursor-pointer text-primary">{t('build.params')}</span>
                      </TooltipTrigger>
                      <TooltipContent
                        side="right"
                        className="max-w-[520px] border bg-gray-50 p-4 text-gray-950 shadow-md"
                      >
                        <div className="flex items-center gap-2">
                          <Badge>{JSON.parse(api.extra)?.method || 'http'}</Badge>
                          <span className="text-xl">{api.name}</span>
                        </div>
                        <div className="mt-2 text-sm text-gray-500">{api.desc}</div>
                        {api.api_params.map(param => (
                          <div key={param.name + Math.round(Math.random() * 100000000)}>
                            <div className="mb-2 mt-4 flex items-center gap-2">
                              <span className="text-base">{param.name}</span>
                              <span>{param.schema.type}</span>
                              {param.required && <span className="text-red-500">必填</span>}
                            </div>
                            <div className="text-gray-500">{param.description}</div>
                          </div>
                        ))}
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                  :
                  {api.api_params.map(param => (
                    <div key={param.name + Math.round(Math.random() * 100000000)}>
                      <span className=" rounded-xl bg-gray-200 px-2 py-1 text-xs font-medium text-white">
                        {param.name}
                      </span>
                      {/* <span>{param.schema.type}</span> */}
                    </div>
                  ))}
                </div>
              )}
              {type === 'edit' && (
                <div className="flexRowStart resultCase">
                  {t('tools.testResult')}：
                  <span
                    className={
                      api.pass_test === 1
                        ? 'resuleName resuleName_success'
                        : api.pass_test === 2
                        ? 'resuleName resuleName_error'
                        : 'resuleName'
                    }
                  >
                    {api.pass_test === 1 ? '成功' : api.pass_test === 2 ? '失败' : '未测试'}
                  </span>
                </div>
              )}
              {select &&
                (select.some(_ => _.id === api.id) ? (
                  <Button size="sm" className="absolute bottom-2 right-4 h-6" disabled>
                    {t('build.added')}
                  </Button>
                ) : (
                  <Button
                    size="sm"
                    className="absolute bottom-2 right-4 h-6"
                    onClick={() => {
                      const obj = {
                        ...api,
                        logo: data.logo,
                        parent_tool_id: data.tool_id
                      }
                      onSelect(obj)
                    }}
                  >
                    {t('build.add')}
                  </Button>
                ))}
            </div>
          ))}
        </div>
      </AccordionContent>
    </AccordionItem>
  )
}
